<template>
  <div class="tank-view">
    <div class="tank-container">
      <div class="tank-controls">
        <div class="control-group">
          <label>View:</label>
          <select v-model="viewMode" @change="updateFishes">
            <option value="recent">Most Recent</option>
            <option value="popular">Most Popular</option>
            <option value="random">Random</option>
          </select>
          <button @click="refreshTank" class="btn-refresh">refresh</button>
        </div>

        <div class="control-group">
          <label>
            <input v-model="notificationsEnabled" type="checkbox" />
            notifications
          </label>
          <span class="separator">|</span>
          <router-link to="/draw-a-fish/rank">rankings</router-link>
          <span class="separator">|</span>
          <a href="#" @click.prevent="showProfile">profile</a>
        </div>

        <div class="control-group">
          <label>Fish count: {{ fishCount }}</label>
          <input
            v-model.number="fishCount"
            type="range"
            min="1"
            max="100"
            @input="updateFishes"
          />
          <span>({{ swimmingCount }} swimming)</span>
        </div>

        <div class="feed-info">
          <p>Feed the fish:</p>
          <p>Hold Shift + Click or Right-click to drop food pellets</p>
        </div>
      </div>

      <!-- 鱼缸画布 -->
      <canvas
        ref="tankCanvas"
        class="tank-canvas"
        @click="handleCanvasClick"
        @contextmenu="handleRightClick"
      />

      <div class="tank-info">
        <p>{{ fishes.length }} fish in tank</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const tankCanvas = ref(null)
const ctx = ref(null)
const viewMode = ref('recent')
const notificationsEnabled = ref(true)
const fishCount = ref(50)
const swimmingCount = ref(0)
const fishes = ref([])
const animationId = ref(null)

const colors = ['#ff0000', '#00cc00', '#0000ff', '#ffff00', '#ff8800', '#000000']

class Fish {
  constructor(x, y, width, height, color) {
    this.x = x
    this.y = y
    this.width = width
    this.height = height
    this.color = color
    this.vx = (Math.random() - 0.5) * 3
    this.vy = (Math.random() - 0.5) * 2
    this.rotation = Math.random() * Math.PI * 2
    this.isSwimming = Math.random() > 0.5
  }

  update(width, height) {
    if (this.isSwimming) {
      this.x += this.vx
      this.y += this.vy

      if (this.x < 0 || this.x > width) this.vx *= -1
      if (this.y < 0 || this.y > height) this.vy *= -1

      this.x = Math.max(0, Math.min(width, this.x))
      this.y = Math.max(0, Math.min(height, this.y))
    }
  }

  draw(ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.rotate(this.rotation)

    // 绘制简单的鱼形状
    ctx.fillStyle = this.color
    ctx.beginPath()
    ctx.ellipse(0, 0, this.width, this.height / 2, 0, 0, Math.PI * 2)
    ctx.fill()

    // 鱼尾
    ctx.beginPath()
    ctx.moveTo(this.width, 0)
    ctx.lineTo(this.width + 10, -8)
    ctx.lineTo(this.width + 10, 8)
    ctx.closePath()
    ctx.fill()

    // 鱼眼
    ctx.fillStyle = 'white'
    ctx.beginPath()
    ctx.arc(-this.width / 3, 0, 3, 0, Math.PI * 2)
    ctx.fill()

    ctx.restore()
  }
}

onMounted(() => {
  const canvasEl = tankCanvas.value
  canvasEl.width = window.innerWidth - 40
  canvasEl.height = 400
  ctx.value = canvasEl.getContext('2d')

  // 生成初始鱼
  generateFishes()

  // 启动动画循环
  animate()

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (animationId.value) {
    cancelAnimationFrame(animationId.value)
  }
})

const generateFishes = () => {
  fishes.value = []
  for (let i = 0; i < fishCount.value; i++) {
    const x = Math.random() * tankCanvas.value.width
    const y = Math.random() * tankCanvas.value.height
    const width = Math.random() * 20 + 15
    const height = width * 0.6
    const color = colors[Math.floor(Math.random() * colors.length)]
    fishes.value.push(new Fish(x, y, width, height, color))
  }
}

const updateFishes = () => {
  generateFishes()
}

const animate = () => {
  const canvasEl = tankCanvas.value
  ctx.value.fillStyle = '#e8f4f8'
  ctx.value.fillRect(0, 0, canvasEl.width, canvasEl.height)

  // 绘制边框
  ctx.value.strokeStyle = '#333'
  ctx.value.lineWidth = 2
  ctx.value.strokeRect(0, 0, canvasEl.width, canvasEl.height)

  swimmingCount.value = 0
  fishes.value.forEach((fish) => {
    fish.update(canvasEl.width, canvasEl.height)
    fish.draw(ctx.value)
    if (fish.isSwimming) swimmingCount.value++
  })

  animationId.value = requestAnimationFrame(animate)
}

const handleResize = () => {
  const canvasEl = tankCanvas.value
  canvasEl.width = window.innerWidth - 40
}

const handleCanvasClick = (e) => {
  if (e.shiftKey) {
    dropFood(e)
  }
}

const handleRightClick = (e) => {
  e.preventDefault()
  dropFood(e)
}

const dropFood = (e) => {
  const rect = tankCanvas.value.getBoundingClientRect()
  const x = e.clientX - rect.left
  const y = e.clientY - rect.top

  // 吸引附近的鱼
  fishes.value.forEach((fish) => {
    const dx = x - fish.x
    const dy = y - fish.y
    const distance = Math.sqrt(dx * dx + dy * dy)

    if (distance < 100) {
      fish.isSwimming = true
      fish.vx = (dx / distance) * 2
      fish.vy = (dy / distance) * 2
    }
  })
}

const refreshTank = () => {
  generateFishes()
}

const showProfile = () => {
  alert('Profile page - 用户个人资料页面')
}
</script>

<style scoped>
.tank-view {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.tank-container {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 1200px;
}

.tank-controls {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 8px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.control-group label {
  font-weight: bold;
}

.control-group select,
.control-group input[type='range'] {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.control-group input[type='range'] {
  flex: 1;
  max-width: 200px;
}

.btn-refresh {
  padding: 5px 15px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.btn-refresh:hover {
  background: #5568d3;
}

.separator {
  color: #999;
  margin: 0 5px;
}

.control-group a {
  color: #667eea;
  text-decoration: none;
  font-weight: bold;
}

.control-group a:hover {
  text-decoration: underline;
}

.feed-info {
  margin-top: 10px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}

.feed-info p {
  margin: 5px 0;
}

.tank-canvas {
  display: block;
  width: 100%;
  border: 2px solid #333;
  border-radius: 8px;
  background: #e8f4f8;
  cursor: pointer;
  margin: 20px 0;
}

.tank-info {
  text-align: center;
  color: #666;
  font-size: 14px;
}
</style>

